<!DOCTYPE html>
<html>

<head>
    <title>菜单栏</title>
    <meta charset="utf-8">
    <style>
        *,
        body {
            margin: 0;
            padding: 0;
            font: 12px/1.5 Arial;
            /* box-sizing: border-box; */
        }

        ul {
            list-style-type: none;
        }

        .nav {
            width: 910px;
            border: 1px solid #4174a7;
            border-radius: 5px;
            margin: 10px auto;
            position: relative;
        }

        .nav ul {
            height: 36px;
            padding: 5px 10px 5px 0;
            background: #4174a7;
            overflow: hidden;
        }

        .nav li {
            float: left;
            width: 110px;
            color: black;
            font-size: 18px;
            border-left: 1px solid #26507b;
        }

        .nav li a {
            font-size: 14px;
            text-align: center;
            display: block;
            text-decoration: none;
            margin: 0 2px 0 4px;
            color: #fff;
            line-height: 36px;
            width: 102px;
        }

        .nav ul li a:hover {
            font-weight: 700;
            background: #80a1c3;
            border: 1px solid #80a1c3;
            border-radius: 5px;
        }

        .nav .subnav {
            position: absolute;
            top: 51px;
            width: auto;
            min-width: 110px;
            height: 30px;
            background: #dde6ef;
            white-space: nowrap;
            border: 1px solid #235e99;
            display: none;

        }

        .nav .subnav p {
            margin-left: 10px;
            padding-right: 10px;
        }

        .nav .subnav p span {
            display: block;
        }

        .nav .subnav p a {
            color: #235e99;
            font-size: 12.5px;
            display: inline;
        }

        .nav .subnav .arrow {
            position: absolute;
            top: -6px;
            left: 31px;
            display: block;
            width: 0;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid #dde6ef;

        }
    </style>

    <script>
        var get = {
            byId: function (id) {
                return document.getElementById(id)
            },
            byClass: function (sClass, oParent) {
                var aClass = [];
                var reClass = new RegExp("(^| )" + sClass + "( |$)");
                var aElem = this.byTagName("*", oParent);
                for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[
                    i]);
                return aClass
            },
            byTagName: function (elem, obj) {
                return (obj || document).getElementsByTagName(elem)
            }
        };

        window.onload = function () {
            var oNav = document.getElementsByClassName("nav")[0];
            var aLi = get.byTagName("li", oNav);
            var aSubNav = get.byClass("subnav", oNav);
            var oSubNav = oEm = timer = null;

            var i = 0;
            for (i = 1; i < aLi.length; i++) {
                aLi[i].onmouseover = function () {
                    for (i = 0; i < aSubNav.length; i++) aSubNav[i].style.display = "none";

                    oSubNav = get.byClass("subnav", this)[0];

                    oEm = get.byTagName("em", oSubNav)[0];

                    oSubNav.style.display = "block";

                    oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ?
                    
                        //如果在显示范围居左显示
                        oSubNav.style.left = this.offsetLeft + "px" :

                        //超出显示范围居右显示
                        oSubNav.style.right = 0;

                    console.log("this: "+this.offsetLeft);

                    oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 +'px';

                    console.log("Sub: "+oSubNav.offsetLeft);

                   
                }

                aLi[i].onmouseout = function(){
                    timer = setTimeout(function(){
                        oSubNav.style.display = "none";
                    }, 3000);
                       
                    }
            }
        }
    </script>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="javascript:;">站长之家</a></li>
            <li>
                <a href="javascript:;">行业资讯</a>
                <div class="subnav" style="display: block; left: 0;">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">业界动态</a> |
                            <a href="javascript:;">收购融资</a> |
                            <a href="javascript:;">门户动态</a> |
                            <a href="javascript:;">搜索引擎</a> |
                            <a href="javascript:;">网络游戏</a> |
                            <a href="javascript:;">电子商务</a> |
                            <a href="javascript:;">广告传媒</a> |
                            <a href="javascript:;">厂商开发</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">站长在线</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">站长报道</a>|
                            <a href="javascript:;">好站推荐</a>|
                            <a href="javascript:;">站长聚会</a>|
                            <a href="javascript:;">站长访谈</a>|
                            <a href="javascript:;">站长茶馆</a>|
                            <a href="javascript:;">网站排行</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">网站运营</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">建站经验</a>|
                            <a href="javascript:;">策划盈利</a>|
                            <a href="javascript:;">搜索优化</a>|
                            <a href="javascript:;">网站推广</a>|
                            <a href="javascript:;">免费资源</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">设计在线</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">酷站推荐</a>|
                            <a href="javascript:;">网页设计</a>|
                            <a href="javascript:;">WEB标准</a>|
                            <a href="javascript:;">视频处理</a>|
                            <a href="javascript:;">设计活动</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">网络编程</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">Asp编程</a>|
                            <a href="javascript:;">Php编程</a>|
                            <a href="javascript:;">.Net编程</a>|
                            <a href="javascript:;">Xml编程</a>|
                            <a href="javascript:;">Access</a>|
                            <a href="javascript:;">Mssql</a>|
                            <a href="javascript:;">Mysql</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">联盟资讯</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">联盟动态</a>|
                            <a href="javascript:;">联盟介绍</a>|
                            <a href="javascript:;">联盟点评</a>|
                            <a href="javascript:;">网赚技巧</a>
                        </span>
                    </p>
                </div>
            </li>
            <li>
                <a href="javascript:;">服务器</a>
                <div class="subnav">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="javascript:;">Web服务器</a>|
                            <a href="javascript:;">Ftp服务器</a>|
                            <a href="javascript:;">Mail服务器</a>|
                            <a href="javascript:;">Dns服务器</a>|
                            <a href="javascript:;">Win服务器</a>|
                            <a href="javascript:;">Linux服务器</a>|
                            <a href="javascript:;">安全防护</a>|
                            <a href="javascript:;">虚拟主机</a>
                        </span>
                    </p>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>